<!-- 自定义导航组件 -->
<template>
  <view>
    <!-- 状态栏占位符 -->
    <view class="status-bar">
      <view class="top_view"></view>
    </view>
    <!-- 导航栏内容 -->
    <view class="title-bar">
      <view class="_flex _flex_content title-box">
        <slot name="left_con">
			<image src="@/static/common/back.png" mode="widthFix"
				class="back_icon" @click="backUp" v-if="_left_con"></image>
		</slot>
        <text class="title _flex_grow" :class="{'title-center': center}"
			:style="slotStyle">{{ title }}</text>
        <slot name="right_con" />
      </view>
    </view>
    <!-- 自定义插槽内容 -->
    <slot />
  </view>
</template>

<script>
const switchTab = []
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    center: {
      type: Boolean,
      default: true
    },
		slotStyle: {
			type: Object,
			default: ()=>{
				return {}
			}
		}
  },
	computed: {
		_is_switchTab(){
			let pages = getCurrentPages(), 
				is_switchTab = { before: false, after: false },
				currPage_before, currPage_after,
				tabIndex = { before: -1, after: -1 }
			const tabIndex_ = (type) => {
				if(tabIndex[type] !== -1) 
					is_switchTab[type] = { path: switchTab[[tabIndex[type]]].route, status: true }
					else is_switchTab[type] = { path: '', status: false }
			}
			if(pages.length>=2) {
				currPage_before = pages[pages.length - 2]
				currPage_after = pages[pages.length - 1]
				tabIndex['before'] = switchTab.findIndex(path => currPage_before.route == path.route )
				tabIndex['after'] = switchTab.findIndex(path => currPage_after.route == path.route )
				tabIndex_('before')
				tabIndex_('after')
			} else if(pages.length==1){
				delete is_switchTab.before
				currPage_after = pages[pages.length - 1]
				tabIndex['after'] = switchTab.findIndex(path => currPage_after.route == path.route )
				tabIndex_('after')
			}
			return is_switchTab
		},
		_left_con(){
			let show = !this.$slots.left_con && !this._is_switchTab.after.status
			return show
		}
	},
  methods: {
		/**
		 * @description: 返回上一页
		 * @param {*} 
		 * @return {*}
		 */
		backUp(){
			if(this._is_switchTab.before.status) 
				uni.switchTab({ url: '/'+this._is_switchTab.before.path })
				else uni.navigateBack({ delta: 1 })
		}
  }
}
</script>

<style lang="scss" scoped>
	@import '@/assets/styles/global.scss';
.title-bar {
  width: 100%;
  height: $System__title_height;
  position: relative;
  box-shadow: 0px 4px 6px rgba(94, 108, 146, 0.19);
  .title-box {
    position: absolute;
    top: 0;
    z-index: 5;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
	padding: 0 $System__bothSides_padding;
	.back_icon{
		width: 34upx;
	}
    .title {
      font-size: $Theme__font_size_title_xxl;
      font-weight: bold;
      line-height: $Theme__font_size_title_xxl;
      vertical-align: middle;
      color: #222222;
      &-center {
        text-align: center;
      }
    }
	}
}
</style>